<template>
  <div class="header">
    <div class="logo">
      <span @click="goHome">
        <i class="iconfont">&#xe66b;</i>
        <span v-html="projectName||'接口文档管理系统'"></span>
      </span>
    </div>
    <div class="headerMenu">
      <!--头部右边设置-->
      <div class="setting">
        <div class="item" @click="readMsg">
          <el-badge :value="99">
            <i class="iconfont">&#xe618;</i> 消息
          </el-badge>
        </div>
        <div class="item">
          <el-dropdown @command="handleCommand">
          <span class="mine">
            <i class="iconfont">&#xe656;</i>
            {{name}}<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="myInfo">我的信息</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
</style>
<script>
  import router from '../router'
  import store from '../util/store'

  export default {
    props: ['projectName'],
    data() {
      return {
        name: store.get('username')
      }
    },
    components: {},
    methods: {
      handleCommand(command) {
        if (command == 'logout') {
          this.$confirm('是否确定退出', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            store.clear();
            this.$message({
              type: 'success',
              message: '退出成功!'
            });
            router.push('/login')
          }).catch(() => {
            this.$message('已取消退出');
          });
        } else if (command == 'myInfo') {
          this.$message('功能正在开发中');
        }
      },
      goHome() {
        router.push('/')
      },
      readMsg() {
        this.$message('功能正在开发中');
      }
    }
  }
</script>
